<template>
  <div>
    <el-header style="height: 100%;border: 1px">
      <el-menu class="el-menu-demo" mode="horizontal" :router="true">
        <el-col :span="4" style="margin: 0px 43% 0px 10px ">
          <h2 style="font-size: 35px">:D豆嗲</h2>
        </el-col>
        <el-menu-item index="/homepage.html" style="padding: 40px 5px 62px 5px">首页</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/allGoods.html" style="padding: 40px 5px 62px 5px">全部商品</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/order.html" style="padding: 40px 5px 62px 5px">我的订单</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/star.html" style="padding: 40px 5px 62px 5px">我的收藏</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/shopping.html" style="padding: 40px 5px 62px 5px">购物车</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/modifyPassword.html" style="padding: 40px 5px 62px 5px">修改密码</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item  style="padding: 40px 5px 62px 5px" @click="logout">注销</el-menu-item>
      </el-menu>
    </el-header>
    <div class="demo-input-suffix" style="margin: 20px 160px 30px 150px;text-align: center" >
      <el-input style="width: 1270px" placeholder="请输入搜索内容" prefix-icon="el-icon-search" v-model.trim="searchForm.goodname" class="demo-form-inline">
      </el-input>
      <el-button  type="primary" class="button" @click="onSubmit">搜索</el-button>
    </div>
    <el-menu :router="true"  class="el-menu-demo" mode="horizontal" style="margin: 20px 150px 30px 150px;">
      <el-menu-item v-for="item in menus" :key="item.id" :index="item.href" >
        {{item.title}}
      </el-menu-item>
    </el-menu>


    <el-row style="margin: 20px 0px 0px 170px;">
      <el-col :span="4" v-for="item in goods" :key ="item.id" class="card" :model="searchForm">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <img :src="item.imghref" class="image">
          <div style="padding: 14px">
            <span>{{item.goodname}}</span>
            <br>
            <div class="bottom clearfix" >
              <span style="color: red;font-size: 30px">￥{{item.price}}</span>
              <br><br>
              <el-button type="text" class="button"  @click="handleEdit(item.id)">立即购买</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pager.pageNum"
        :page-sizes="pager.options"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager,next,jumper "
        :total="pager.count" style="padding-top: 50px">
    </el-pagination>
    <br><br>

    <el-footer  style="padding:0px 0px 350px 0px">
      <el-row>
        <img width="35px" height="35px" style="margin: 50px 0px 0px -60%" src="../img/many.png">
        <h1 style="color: white;margin: -70px 42% 0px 0px ">品类齐全，轻松购物</h1>
        <el-col :span="2" style="margin: -50px 0px 0px 37% ">
          <img width="35px" height="35px" src="../img/fast.png">
        </el-col>
        <h1 style="color: white;margin: -60px 0% 0px 0px">多仓直发，极速配送</h1>
        <el-col :span="2" style="margin: -53px 0px 0px 200px ">
          <img width="33px" height="33px" src="../img/good.png">
        </el-col>
        <h1 style="color: white;margin: -60px 0px 0px 40%">正品好货，精致服务</h1>
      </el-row>
      <el-divider></el-divider>
      <img width="50px" height="50px" src="../img/touxiang.png">
      <el-breadcrumb>
        <el-breadcrumb-item style="font-size: 18px;margin-left: 30px">关于我们</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">联系我们</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">人才招聘</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">商家入驻</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">广告服务</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">手机京东</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">友情链接</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">销售联盟</el-breadcrumb-item>
      </el-breadcrumb>
      <h1 style="color: #8a8a8a;font-size: 15px;margin: 0px 20px 0px 0px">Copyright &copy; 2021 豆嗲:D.com版权所有</h1>
    </el-footer>

  </div>
</template>

<script>
import allGoodsApi from "@/http/allGoodsApi";
import loginApi from "@/http/loginApi";

export default {
  name: "AllGoods",
  created(){
    this.getList();
    this.$store.dispatch("GET_USERINFO_ACTIONS");
  },
  data(){
    return {
      searchForm:{},
      menus:[
        {id:1,title:"包包",href:"/bags.html",roles:"0,1,2"},
        {id:2,title:"半身裙",href:"/skirts.html",roles:"0,1,2"},
        {id:3,title:"长裤",href:"/pants.html",roles:"0,1,2"},
        {id:4,title:"短裤",href:"/shorts.html",roles:"0,1,2"},
        {id:5,title:"连衣裙",href:"/dress.html",roles:"0,1,2"},
        {id:6,title:"卫衣",href:"/sweaters.html",roles:"0,1,2"},
        {id:7,title:"T恤",href:"/tshirts.html",roles:"0,1,2"}
      ],
      currentDate: new Date(),
      goods: "",
      pager: {
        pagerNum: 1,
        pageSize: 10
      }
    }
  },
  methods:{
    getList(){
      allGoodsApi.getListByPage(this.searchForm, {
        pageNum: this.pager.pageNum,
        pageSize: this.pager.pageSize
      }).then(res =>{
        console.log(res);
        if (res.data.code == 200){
          this.pager = res.data.data
          this.goods = this.pager.data
        }
      })
    },
    onSubmit() {
      this.getList();
    },
    handleSizeChange(val){
      this.pager.pageSize = val
      this.getList();
    },
    handleCurrentChange(val){
      this.pager.pageNum = val
      this.getList();
    },
    handleEdit(id) {
      console.log(id);
      this.$router.push(`/goods/toEdit/${id}.html`)
    },
    logout(){
      loginApi.logout().then(res => {
        if (res.data.code == 200) {
          this.$message.info(res.data.msg);
          sessionStorage.clear();
          this.$router.replace("/login.html");
        }
      })
    }
  }
}
</script>

<style >
.el-pagination{
  text-align: center;
}
.nav{
  line-height: 60px;
  font-size: 20px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.card{
  display: inline-block;
  margin: 10px;
  right: 10%;
}
</style>